<template>
    <van-nav-bar :fixed="true" :safe-area-inset-top="true" @click-left="goBack" @click-right="stateRight"  :ref="stateDom">
    <template #left>
        <van-icon name="arrow-left" color="#333" size="18"/>
    </template>
    <template #title>
        <span >{{headerTitle}}</span>
    </template>
    <template #right>
        <van-icon name="ellipsis" color="#333" size="18" v-if="!right"/>
        <span v-else>{{right}}</span>
    </template>
    </van-nav-bar>
    <div class="block"></div>
</template>
<script lang="ts">
import { defineComponent,ref,nextTick } from "vue";
import { useRouter,onBeforeRouteLeave } from "vue-router";
export default defineComponent({
    props: {
        title: {
            type: String,
            required: true
        },
        back: {
            type: String,
            default: ''
        },
        right: {
            type: String,
            default: ''
        }
    },
    emits: ['callback', 'callHeight', 'clickRight'],
    setup(props: any, ctx) {
        let {title, back, right} = props;
        const headerTitle: string = title, header = ref();
        const stateDom = (el:HTMLElement): any=> {
            header.value = el
        }
        
        const router = useRouter();
         nextTick(() => {
            ctx.emit('callHeight', header.value?.$el.clientHeight)
        })
        const goBack = () => {
            if (back) {
                console.log(back)
                router.push({
                    path: back
                })
            } else {
                router.back()
            }
            ctx.emit('callback');
        }
        const stateRight = () => {
            ctx.emit('clickRight');
        }
        // 页面回退判断
        onBeforeRouteLeave((to) => {
            if (to.name == 'login') router.push({name: 'my'})
        })
        return {
            headerTitle,
            right,
            goBack,
            stateDom,
            stateRight
        }
    }

})
</script>
<style lang="less">
.block {
    height: var(--van-nav-bar-height);
}
</style>